<!-- 下单 -->
<template>
  <div>
    <web-header></web-header>

    <div class="mainContent">
      <div class="mainLeft">
        <img src="@/assets/images/1481161992.jpg" v-if="!url" style="position: fixed;width: 42.7%;top:0;bottom:0;height:100vh" alt="">
        <img :src="url" v-else alt="" style="position: fixed;width: 42.7%;top:0;bottom:0;height:100vh">
      </div>
      <div class="mainRight" v-loading="loading" element-loading-text="加载中">
        <div class="mainHeader">
          <div class="mainBox">
            <div style="width:100%">
              <ul>
                <li v-for="i in stepList" :key="i.code" :class="step === i.code?'mainBoxActive':''">{{i.value}}</li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 第一步 -->
        <div v-if="step === 1">
          <div class="mainSystem">
            <div class="bt1">{{$t('lan.selectSystem')}}</div>
            <div class="mainSystemContent">
              <div v-for="i in systemList" @click="selectCollection(i,'system')" :key="i.id" :class="i.code === systemCode?'mainSelect':'mainSelectd'">
                <img :src="i.imgUrl" width="30" height="30" alt="" style="vertical-align: middle;margin-right:5px">
                <span>{{i.code}}</span>
              </div>
            </div>
          </div>
          <div class=" mainSystem">
            <div class="bt1">{{$t('lan.equipmentCollection')}}</div>
            <div class="mainSystemContent">
              <div v-for="i in collectionList" :key="i.id" @click="selectCollection(i,'collection')" :class="i.select?'mainSelect':'mainSelectd'">
                <span>{{i.code}}</span>
              </div>
            </div>
          </div>
          <div class="mainSystem">
            <div class="bt1">{{$t('lan.isServer')}}</div>
            <div class="mainSystemContent">
              <div v-for="i in serverList" :key="i.id" @click="selectCollection(i,'server')" :class="isServer === i.id?'mainSelect':'mainSelectd'">
                <span>{{i.code}}</span>
              </div>

            </div>
          </div>
        </div>
        <!-- 第二步 -->
        <div v-else-if="step === 2">
          <div class="mainSystem">
            <div class="bt1" style="padding:0px 20px">{{$t('lan.selectAuxiliary')}}</div>
            <div class="mainSystemContent">
              <div class="mainRight" style="width: 80%;padding: 15px;float: left;" v-for="(i,index) in categoryList" :key="index">
                <div class="categoryText">{{i.code}}</div>
                <div class="inputNumber">
                  <div class="inputDearcase" @click="addNum(i,'sub')">
                    <i class="el-icon-minus"></i>
                  </div>
                  <div class="mainNum">{{i.totalNum}}</div>
                  <div class="inputIncrease" @click="addNum(i,'add')">
                    <i class="el-icon-plus"></i>
                  </div>
                </div>
              </div>
              <div class="totalNum">
                <div>{{$t('lan.totalQuantity')}}：<span>{{categoryTotal}}{{$t('lan.cabinet')}}</span><span class="pl10">{{totalNum}}{{$t('lan.doors')}}</span></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 第三步 -->
        <div v-else-if="step === 3">
          <div class="mainSystem">
            <div class="bt1" style="margin-left:20px">{{$t('lan.doorColor')}}</div>
            <div class="mainSystemContent" style="width:500px">
              <div class="colorBox" v-for="i in colorList" @click="selectCollection(i,'color')" :class="i.id === colorCode?'mainSelect':''" :style="{color:i.value,background:i.value,border:i.id==='5' && colorCode!='5'?'1px solid #e5e5e5':'',boxSizing: 'border-box'}" :key="i.id"></div>
              <!-- <div class="colorBox otherColor" :style="{border:colorValue?'':'1px solid red'}" @click="otherColor1('11')" :class="colorValue?'mainSelect':''">{{$t('lan.other')}}</div> -->
              <div class="colorBox" style="width:360px">
                <el-input :placeholder="$t('lan.pleaseColor')" @change="changeColor" v-model="colorVal" class="mt20">
                  <template slot="prepend">Other</template>
                </el-input>
              </div>
            </div>
          </div>
          <div class="mainSystem">
            <div class="bt1" style="margin-left:20px">{{$t('lan.cabinetColor')}}</div>
            <div class="mainSystemContent" style="width:500px">
              <div class="colorBox" v-for="i in colorList1" @click="selectCollection(i,'color1')" :class="i.id === cabinetCode?'mainSelect':''" :style="{color:i.value,background:i.value,border:i.id==='5' && cabinetCode!='5'?'1px solid #e5e5e5':'',boxSizing: 'border-box'}" :key="i.id"></div>
              <!-- <div class="colorBox otherColor" :style="{border:cabinetColor?'':'1px solid red'}" @click="otherColor('11')" :class="cabinetColor?'mainSelect':''">{{$t('lan.other')}}</div> -->
              <div class="colorBox" style="width:360px">
                <el-input :placeholder="$t('lan.pleaseColor')" @change="changeColor1" v-model="cabinetColorValue" class="mt20">
                  <template slot="prepend">Other</template>
                </el-input>
              </div>
            </div>
          </div>
        </div>

        <!-- 第四步 -->
        <div v-else-if="step === 4">
          <div class="mainSystem">
            <div class="bt1">{{$t('lan.roof')}}</div>
            <div class="mainSystemContent">
              <div v-for="i in ceiling" :key="i.id" @click="selectCollection(i,'ceiling')" :class="ceilingCode === i.id?'mainSelect':'mainSelectd'">
                <span>{{i.code}}</span>
              </div>
            </div>

          </div>
          <div class="mainSystem">
            <div class="bt1">{{$t('lan.stability')}}</div>
            <div class="mainSystemContent">
              <div v-for="i in footList" :key="i.id" @click="selectCollection(i,'foot')" :class="footCode === i.id?'mainSelect':'mainSelectd'">
                <span>{{i.code}}</span>
              </div>
            </div>
          </div>
          <div class="mainSystem">
            <div class="bt1">{{$t('lan.guarantee')}}</div>
            <div class="mainSystemContent">
              <div v-for="i in packagingList" :key="i.id" @click="selectCollection(i,'packaging')" :class="packagingCode === i.id?'mainSelect':'mainSelectd'">
                <span>{{i.code}}</span>
              </div>
            </div>
          </div>
          <div class="mainSystem">
            <div class="bt1">{{$t('lan.security')}}</div>
            <div class="mainSystemContent">
              <div v-for="i in cameraList" :key="i.id" @click="selectCollection(i,'cameraCode')" :class="cameraCode === i.id?'mainSelect':'mainSelectd'">
                <span>{{i.code}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="mainSystem" v-if="step ===1">
          <button @click="nextStep('next')" :style="{'background':!oneStep?'#c0c4cc':'','border':!oneStep?'1px solid #c0c4cc':''}" :disabled="!oneStep">{{$t('lan.next')}}</button>
        </div>
        <div class="mainSystem" v-if="step ===2">
          <button class="previous" v-if="step>1" @click="nextStep('previous')">{{$t('lan.previous')}}</button>
          <button @click="nextStep('next')" :style="{'background':!twoStep?'#c0c4cc':'','border':!twoStep?'1px solid #c0c4cc':''}" :disabled="!twoStep">{{$t('lan.next')}}</button>
        </div>
        <div class="mainSystem" v-if="step ===3">
          <button class="previous" v-if="step>1" @click="nextStep('previous')">{{$t('lan.previous')}}</button>
          <button @click="nextStep('next')" :style="{'background':!threeStep?'#c0c4cc':'','border':!threeStep?'1px solid #c0c4cc':''}" :disabled="!threeStep">{{$t('lan.next')}}</button>
        </div>
        <div class="mainSystem" v-if="step ===4">
          <button class="previous" @click="nextStep('previous')">{{$t('lan.previous')}}</button>
          <button :style="{'background':!fourStep?'#c0c4cc':'','border':!fourStep?'1px solid #c0c4cc':''}" @click="addCat" :disabled="!fourStep">{{$t('lan.shoppingCart')}}</button>
        </div>

        <!-- 第五步 -->
        <div v-else>
          <div v-if="list.length">
            <div v-for="i in list" :key="i.id" class="borderBottom">
              <div class="box">
                <div class="boxLeft" style="flex:0 0 50px;" @click="selectShop(i)">
                  <i class="el-icon-success iconSize" :class="i.select?'iconSelected':'iconSelect'"></i>
                </div>
                <div class="boxRight">
                  <div>
                    <p class="orderTitle" style="flex: 0 0 400px;">{{i.categoryName}}</p>
                    <p class="orderDel tar" @click="cartDel(i.id)">{{$t('lan.del1')}}</p>
                  </div>
                  <div>
                    <p><span class="gray">{{$t('lan.cabinet')}}：</span>{{i.subCategoryTotalCount}}</p>
                    <p><span class="gray">{{$t('lan.numberDoors')}}：</span>{{i.doorTotalCount}}</p>
                    <p class="font-w" style="color:#EA5420">$：{{i.amt}}</p>
                  </div>
                  <div>
                    <p><span class="gray">{{$t('lan.doorColor')}}：<span>{{i.colorValue?i.colorValue:''}}</span><span :class="i.deviceColor!='11'?'colorValue':''" :style="{background:i.colorValue?'':formatColor(i.deviceColor)}"></span></span> </p>
                    <p><span class="gray">{{$t('lan.cabinetColor')}}：</span><span>{{i.cabinetColorValue?i.cabinetColorValue:''}}</span><span :class="i.cabinetColor!='11'?'colorValue':''" :style="{background:i.cabinetColorValue?'':formatColor(i.cabinetColor)}"></span></p>
                    <p><span class="gray">{{$t('lan.system')}}：</span>{{i.operationCode}}</p>
                  </div>
                  <div>
                    <p>{{i.serverFlag === '1'?$t('lan.serverRequired'):$t('lan.noServerRequired')}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="totalAmt">
              <el-row>
                <el-col :span="18">
                  <div>{{$t('lan.total')}}</div>
                </el-col>
                <el-col :span="6">
                  <span class="font-w" style="color:#EA5420">$ {{totamAmt?totamAmt:'0.00'}}</span>
                </el-col>
              </el-row>
            </div>
            <el-row style="margin-bottom:10px;">
              <el-col :span="6" :offset="9">
                <el-button @click="invoicing" :style="{'background':'#ee781e','color':'#fff','width':'100%','height':'65px',borderRadius:'0px',fontSize:'18px'}" :disabled="!isSave">{{$t('lan.check')}}</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSystemList, getCategoryList, saveCat, getCategory, catList, delCart } from '../api'
import { Notification, MessageBox } from 'element-ui'
import { cameraList, stepList, colorList } from '../common'
export default {
  data () {
    return {
      imgHeight: null,
      url: '',//主柜图片
      cabinetColorValue: '',//柜体其他颜色
      cabinetColor: '',// 柜体颜色
      cabinetCode: null,
      isColor1: false,
      colorVal: '',
      colorValue: '',
      isColor: false,
      isSeleted: false,
      step: 1,// 默认步骤
      systemCode: null,
      isServer: null,
      colorCode: null,
      packagingCode: null,
      ceilingCode: null,
      footCode: null,
      cameraCode: null,
      stepList: stepList, // 步骤列表
      systemList: [],//系统列表
      categoryList: [],//副柜列表
      collectionList: [
        { id: '1', code: this.$t('lan.pos'), select: false },
        { id: '2', code: this.$t('lan.device'), select: false },
        { id: '3', code: this.$t('lan.machine'), select: false },
      ],// 设备收款方式
      colorList: colorList,// 颜色列表
      colorList1: colorList,// 颜色列表
      serverList: cameraList, // 是否需要服务器
      ceiling: cameraList,// 是否需要顶棚
      footList: cameraList, // 是否需要底脚
      packagingList: cameraList, // 是否需要木箱包装
      cameraList: cameraList,  // 是否需要摄像头
      list: [],
      loading: false,
    }
  },
  computed: {
    isSave () {
      let isSave = false
      const cartList = this.list.filter((item) => item.select)
      const cart = Array.from(cartList, ({ select }) => select)
      if (cart.includes(true)) return isSave = true
    },
    // 总金额
    totamAmt () {
      let amount = null
      for (let i of this.list) {
        if (i.select) {
          amount += i.amt
        }
      }
      return amount
    },
    oneStep () {
      if (this.systemCode && this.isServer && this.isSeleted) return true
      else return false
    },
    threeStep () {
      if ((this.colorCode && this.cabinetCode) || (this.isColor && this.isColor1) || (this.colorCode && this.isColor1) || (this.cabinetCode && this.isColor)) return true
      else return false
    },
    twoStep () {
      for (let i of this.categoryList) {
        if (i.totalNum > 0) return true
      }
    },
    fourStep () {
      if (this.ceilingCode && this.footCode && this.packagingCode && this.cameraCode) return true
      else return false
    },
    // 计算副柜
    categoryTotal () {
      let totalAmt = null
      this.categoryList.map((item) => {
        totalAmt += item.totalNum
      })
      return totalAmt
    },
    // 计算一共几扇门
    totalNum () {
      let totalAmt = null
      this.categoryList.map((item) => {
        totalAmt += item.totalNum * item.doorCount
      })
      return totalAmt
    }
  },
  methods: {
    changeColor (val) {
      // let reg = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/
      // if (!reg.test(val)) {
      //   this.isColor = false
      //   return Notification({ type: 'error', title: '错误', message: '门板颜色值格式错误' })
      // } else 
      this.isColor = true
    },
    changeColor1 (val) {
      // let reg = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/
      // if (!reg.test(val)) {
      //   this.isColor1 = false
      //   return Notification({ type: 'error', title: '错误', message: '柜体颜色值格式错误' })
      // } else 
      this.isColor1 = true
    },
    formatColor (id) {
      for (let i of colorList) {
        if (id === i.id) return i.value
      }
    },
    addNum (val, type) {
      if (type === 'add') {
        if (this.categoryTotal >= 8) {
          MessageBox.alert(this.$t('lan.most'), {
            type: 'error ',
          }).then(() => {

          }).catch((err) => {

          });
          return
        }
      }
      if (type === 'sub') {
        if (val.totalNum === 0) return
        val.totalNum -= 1
      }
      else val.totalNum += + 1
    },
    // 下一步  上一步
    nextStep (type) {
      if (type === 'next') this.step += 1
      else this.step -= 1
    },
    // 获取主柜信息
    async getCategoryList () {
      const data = await getCategory(this.$route.query.id)
      this.url = data.url
    },
    //获取列表
    async getList () {
      const systemId = this.$route.query.id
      this.systemList = await getSystemList({ categoryId: systemId })
      for (let i of this.systemList) {
        if (i.code === 'None') this.systemCode = i.code
        i.imgUrl = require('../../assets/images/' + i.iconUrl + '.png')
      }
      const categoryData = await getCategoryList({ categoryId: systemId })
      for (let i of categoryData) {
        i.totalNum = 0
      }
      this.categoryList = categoryData
      // let elStyle = this.$el
      // const mainHeight = elStyle.querySelector('.mainRight').offsetHeight
      // if (mainHeight > imgHeight) this.imgHeight = mainHeight
      // else this.imgHeight = imgHeight
    },
    // 选择收款方式 、是否需要服务器
    selectCollection (item, type) {
      if (type === 'collection') {
        item.select = !item.select
        for (let i of this.collectionList) {
          if (i.select) {
            return this.isSeleted = true
          }
          this.isSeleted = false
        }
      } else if (type === 'server') {
        if (item.id === this.isServer) return this.isServer = null
        this.isServer = item.id
      } else if (type === 'color') {
        if (item.id === this.colorCode) return this.colorCode = null
        this.colorCode = item.id
        this.colorValue = null
        this.colorVal = null
        this.isColor = false
      } else if (type === 'color1') {
        if (item.id === this.cabinetCode) return this.cabinetCode = null
        this.cabinetCode = item.id
        this.cabinetColorValue = null
        this.cabinetColor = null
        this.isColor1 = false
      } else if (type === 'packaging') {
        if (item.id === this.packagingCode) return this.packagingCode = null
        this.packagingCode = item.id
      } else if (type === 'foot') {
        if (item.id === this.footCode) return this.footCode = null
        this.footCode = item.id
      } else if (type === 'ceiling') {
        if (item.id === this.ceilingCode) return this.ceilingCode = null
        this.ceilingCode = item.id
      } else if (type === 'cameraCode') {
        if (item.id === this.cameraCode) return this.cameraCode = null
        this.cameraCode = item.id
      } else {
        if (item.code === this.systemCode) return this.systemCode = null
        this.systemCode = item.code
      }
    },
    // 加入购物车
    async addCat () {
      const code = this.categoryList.filter((item) => item.totalNum > 0)
      const subCategoryCodeList = Array.from(code, ({ code }) => code)
      const subCategoryCountList = Array.from(this.categoryList, ({ totalNum }) => totalNum).filter((item) => item > 0)
      const list = this.collectionList.filter((item) => item.select)
      const paymentTypeDeviceList = Array.from(list, ({ id }) => id)
      const data = {
        subCategoryCodeList,
        subCategoryCountList,
        paymentTypeDeviceList,
        operationCode: this.systemCode,
        deviceColor: this.colorCode ? this.colorCode : this.colorValue,
        cabinetColor: this.cabinetCode ? this.cabinetCode : this.cabinetColor,
        cabinetColorValue: this.cabinetColorValue,
        colorValue: this.colorVal,
        serverFlag: this.isServer,
        ceilingFlag: this.ceilingCode,
        footingFlag: this.footCode,
        cameraFlag: this.cameraCode,
        woodFlag: this.packagingCode,
        productId: +this.$route.query.productId,
        categoryId: +this.$route.query.id,
        subCategoryTotalCount: this.categoryTotal,
        doorTotalCount: this.totalNum,
        userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : ''
      }
      try {
        this.loading = true
        await saveCat(data)
        Notification({ type: 'success', title: this.$t('lan.success'), message: this.$t('lan.successOrder') })
        this.step = 5
        this.getOrderList();
      } catch (err) {
        this.loading = false
      }
    },
    // 获取订单列表
    async getOrderList () {
      try {
        const data = await catList({ userId: JSON.parse(localStorage.getItem('userInfo')) ? JSON.parse(localStorage.getItem('userInfo')).id : '' })
        for (let i of data.datas) {
          i.select = true
        }
        localStorage.setItem('cartList', JSON.stringify(data.datas))
        this.list = data.datas
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    invoicing () {
      const cartList = this.list.filter((item) => item.select)
      const id = Array.from(cartList, ({ id }) => id)
      localStorage.setItem('shopId', JSON.stringify(id))
      this.$router.push('/orderConfirmation')
    },
    selectShop (item) {
      item.select = !item.select
    },
    // 删除购物车列表
    cartDel (id) {
      this.$confirm(this.$t('lan.productPrompt'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: "warning"
      }).then(async () => {
        await delCart(id)
        Notification({ title: this.$t('lan.success'), type: 'success', message: this.$t('lan.del') })
        this.getOrderList()
      });
    },
  },
  mounted () {
    this.getList();
    this.getCategoryList();
    this.imgHeight = window.innerHeight - 110
  }
}
</script>
<style scoped>
.mainHeader {
  width: 100%;
  z-index: 9;
}
.mainBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  margin: 40px 0px 30px 0px;
  border-bottom: 1px solid #d9d9d9;
}
.mainBox div img {
  position: relative;
  cursor: pointer;
}
.mainBox div ul {
  display: flex;
  align-items: center;
}
.mainBox div ul li {
  height: 70px;
  line-height: 70px;
  padding: 0px 15px;
  background: #fff;
  color: #666;
  font-size: 20px;
  margin-right: 3px;
}
.mainBoxActive {
  border-bottom: 3px solid #ee781e !important;
  color: #fff;
}
.mainContent {
  overflow: hidden;
}
.mainContent >>> .is-disabled {
  color: #fff !important;
  background-color: #909399 !important;
  border-color: #909399 !important;
}
.mainLeft {
  float: left;
  width: 42.7%;
  display: inline-flex;
  text-align: center;
}
.mainLeft img {
  width: 100%;
}
.mainRight {
  float: right;
  width: 57.3%;
  padding: 0 10px 0px 30px;
  box-sizing: border-box;
}
.mainSystem {
  float: left;
  margin: 20px 0px;
  width: 100%;
}
.bt1 {
  font-size: 18px;
  color: #2c2c2c;
  margin-left: 10px;
}
.mainSystemContent {
  float: left;
}
.mainSystemContent >>> .el-input__inner {
  height: 50px;
}
.mainSelect {
  float: left;
  position: relative;
  width: 160px;
  height: 60px;
  margin: 10px 10px;
  line-height: 60px;
  color: #4abe84;
  background-color: #fff;
  text-align: center;
  border: 1px solid #ee781e;
  box-sizing: border-box;
}
.mainSelect span,
.mainSelectd span {
  font-size: 16px;
  vertical-align: middle;
  color: #7b7b7b;
}
.mainSelect:before {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  border: 17px solid #ee781e;
  border-top-color: transparent;
  border-left-color: transparent;
}
.mainSelect:after {
  content: "";
  width: 5px;
  height: 12px;
  position: absolute;
  right: 6px;
  bottom: 6px;
  border: 1px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.mainSelectd {
  float: left;
  position: relative;
  width: 160px;
  height: 60px;
  margin: 10px 10px;
  line-height: 60px;
  color: #666;
  background-color: #fff;
  text-align: center;
  border: 1px solid #e5e5e5;
  box-sizing: border-box;
}
.mainSystemContent div {
  cursor: pointer;
}
.mainSystem button {
  min-width: 230px;
  height: 60px;
  margin: 10px;
  text-align: center;
  color: #fff;
  background-color: #ee781e;
  border-color: #ee781e;
  border: 1px solid #ee781e;
  font-size: 20px;
  cursor: pointer;
  outline: none;
}
.previous {
  background: #c0c4cc !important;
  border: 1px solid #c0c4cc !important;
}
.categoryText {
  padding-left: 25px;
  font-size: 16px;
  float: left;
  height: 40px;
  line-height: 40px;
  min-width: 40px;
  width: 100px;
}
.totalNum {
  float: left;
  width: 100%;
  font-size: 22px;
  padding: 10px 20px;
  font-weight: 500;
}

.colorBox {
  float: left;
  position: relative;
  width: 60px;
  height: 60px;
  margin: 20px 20px;
}
.otherColor {
  line-height: 80px;
  text-align: center;
  border: 1px solid red;
  border-radius: 7px;
  box-sizing: border-box;
}
.inputNumber {
  position: relative;
  display: inline-block;
  width: 240px;
  border: 1px solid #e5e5e5;
  line-height: 45px;
}
.inputDearcase {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #dcdfe6;
  width: 40px;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
}
.mainNum {
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;
}
.inputIncrease {
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 0px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #dcdfe6;
  width: 40px;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
}

.borderBottom {
  overflow: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.box {
  display: flex;
  align-items: center;
  color: #2c2c2c;
}
.boxLeft {
  cursor: pointer;
  flex: 0 0 140px;
}
.boxRight {
  flex: 1;
}
.boxRight div {
  display: flex;
  padding-bottom: 15px;
}
.boxRight div p {
  flex: 1;
  font-size: 16px;
}
.inputIncrease {
  position: absolute;
  z-index: 1;
  top: 0px;
  right: 0px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #dcdfe6;
  width: 40px;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
}
.totalAmt {
  margin: 30px 0px;
  height: 45px;
  line-height: 45px;
}
.totalAmt > div {
  font-size: 20px;
}
.totalAmt span {
  color: #f53434;
  margin: 0px 10px;
}
.iconSelect {
  color: #bbb;
}
.iconSelected {
  color: #ee781e !important;
}
.iconSize {
  font-size: 28px;
}
</style>